<template>

    <el-menu :default-active="$route.path" router class="h-full">
        <template v-for="(item, index) in menuList" :key="index">
            <el-sub-menu :index="item.path" v-if="!item.meta.hidden && item.meta.parent">
                <template #title>
                    <el-icon :size="20">
                        <component :is="item.meta.icon" />
                    </el-icon>
                    <span> {{ item.name }}</span>
                </template>
                <el-menu-item :index="child.path" v-for="(child, childIndex) in item.children"
                    :key="index + '' + childIndex">
                    {{ child.name }}
                </el-menu-item>
            </el-sub-menu>
        </template>

    </el-menu>
</template>


<script setup lang="ts">
import { reactive } from 'vue';
import router from '../router';

const menuList = reactive(router.getRoutes());


</script>